<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small"  :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="项目编码"  prop="projectNo">
        <el-input v-model.trim="queryParams.projectNo" @change="handleQuery"  placeholder="请输入项目编码" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="产品名称" prop="productName">
        <el-input v-model.trim="queryParams.productName" @change="handleQuery"  placeholder="请输入产品名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="PRD OA单号" prop="prdOaNo">
        <el-input v-model.trim="queryParams.prdOaNo" @change="handleQuery"  placeholder="PRD OA单号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
        <!-- <el-button type="warning" plain icon="el-icon-download"   @click="handleExport"  v-hasPermi="['projectManage:project:export']">导出</el-button> -->
        <el-button icon="el-icon-refresh"   @click="resetQuery">重置</el-button>
        
      </el-form-item>
    </el-form>
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待设置" name="first">
      </el-tab-pane>
      <el-tab-pane label="已设置" name="second"></el-tab-pane>
    </el-tabs> -->

    <el-radio-group v-model="activeName" @change="handleClick">
      <el-radio-button :label="0" >{{ this.unDoneNum }}</el-radio-button>
      <el-radio-button :label="1" >{{ this.doneNum }}</el-radio-button>
    </el-radio-group>

    <el-table border v-loading="loading" :data="projectList"  :border="false"  header-cell-class-name="table_header_row">
      <el-table-column label="项目编码" align="left"   prop="projectNo"  width="150">
        <template slot-scope="scope">
          <a style="color: cornflowerblue;" @click="openViewDetail(scope.row)">{{ scope.row.projectNo }}</a>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" align="center" prop="projectName"  width="150"/>
      <el-table-column label="产品名称" align="center" prop="productName"  width="150"/>
      <el-table-column label="项目经理" align="center" prop="projectManagerName"  width="150"/>
      <el-table-column label="MRD OA单号" align="center" prop="mrdOaNo" width="180">
        <template slot-scope="scope">
          <a style="color: cornflowerblue;"   @click="linkToOA(scope.row.mrdOaId)"> {{ scope.row.mrdOaNo }} <i class="el-icon-link"></i></a> 
        </template>
      </el-table-column>
      <el-table-column label="PRD OA单号" align="center" prop="prdOaNo"   width="180">
        <template slot-scope="scope">
          <a style="color: cornflowerblue;"   @click="linkToOA(scope.row.prdOaId)"> {{ scope.row.prdOaNo }} <i class="el-icon-link"></i></a> 
        </template>
      </el-table-column>
      <el-table-column label="状态" :show-overflow-tooltip="true" align="center" prop="status"  width="150">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.project_list_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime"  width="200">
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="nickName"  width="150"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
        <template slot-scope="scope">           
          <el-button size="small"  type="primary" v-show="scope.row.status == 10"  icon="el-icon-setting" @click="handleSet(scope.row)" v-hasPermi="['projectManage:list:setup']">设置</el-button>
          <el-button size="small"  type="warning" v-show="scope.row.status == 10"  icon="el-icon-close" @click="handleReject(scope.row)" v-hasPermi="['projectManage:list:setup']">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog title="驳回项目" :visible="visible" width="500px"   @close="closeReject" >
      <el-form ref="form" :model="rejectData" label-width="80px" :rules="rejectRules">
        <el-form-item label="驳回原因" prop="remark">
          <el-input type="textarea" v-model="rejectData.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onReject">提交</el-button>
          <el-button @click="closeReject">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>  



    <el-dialog :title="title" :visible="open" 
        v-loading="dialogLoading" 
        @close="closeOpen" 
        width="600px"
        
        :close-on-click-modal="false" 
        :close-on-press-escape="false"
        custom-class="tree-dialog"
          append-to-body>
          <el-row>
            <el-col :span="20"  style="font-size:20px;">
               当前模板版本号:{{ form.versionNo }}
            </el-col>
            <el-col :span="4">
              <el-button type="primary" round @click="onSure">提交</el-button>
              
            </el-col>
          </el-row>
          
          <el-row><el-col :span="24">
            <el-tree
                :data="taskTrees"
                show-checkbox
                node-key="id"
                default-expand-all
                @check="handleClickNodes"
                :props="defaultProps"
                :default-checked-keys="checkedList"
                ref="tree">
            </el-tree> 
          </el-col></el-row>
           
    </el-dialog>         
  </div>
</template>

<script>


import {saveSetUp,getSetup,getSetupProjectList,rejectSetUp}  from "@/api/projectManage/setup";
import {getUserByPostCode}  from "@/api/system/user";
import {getProjectCurrTempleteDetail}  from "@/api/projectManage/templete";
import {signLoginToEkp}  from "@/api/oa/oa";
export default {
  name: "ProjectList",
  dicts: ['project_list_status','owner_position'],
  data() {
    return {

      //默认待设置  
      activeName:'0',

      //弹出层loading
      dialogLoading:false,

      unDoneNum:'',
      doneNum:'',
 

      title:null,

      titleMember:null,

      visible:false,
 
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //项目列表
      projectList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //当前ID
      currentId:null,

      //人员列表
      userList:[],

      //弹出框默认选中
      checkedList:[],


      //项目经理列表
      projectManagerList:[],

      //行号
      lineNo:0,
      defaultProps: {
          children: 'children',
          label: 'label'
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectNo: null,
        projectManager: null,
        mrdOaNo:null,
        prdOaNo:null,
        flag:0
      },
      form:{},
      param:{},
      checkedNodeList:[],
      //驳回
      rejectData:{},
      rejectRules:{
          remark: [
            { required: true, message: "备注不能为空", trigger: "blur" }
          ], 
      },
      rules:{
          projectName: [
            { required: true, message: "项目名称不能为空", trigger: "blur" }
          ], 
          projectNo: [
            { required: true, message: "项目编号不能为空", trigger: "blur" }
          ], 
          projectManager: [
            { required: true, message: "项目经理不能为空", trigger: "blur" }
          ], 
          mrdOaNo: [
            { required: true, message: "MRD OA单号不能为空", trigger: "blur" }
          ],
          prdOaNo: [
            { required: true, message: "PRD OA单号不能为空", trigger: "blur" }
          ],  
        },
        rulesMember:{
          type: [
            { required: true, message: "岗位不能为空", trigger: "blur" }
          ], 
          userId: [
            { required: true, message: "用户不能为空", trigger: "blur" }
          ], 
        },
        taskTrees:[]
    };
  },
  created() {
    this.getList();
    this.getProjectManagerList();
    this.handelNum(); 
  },
 
  methods: {

    handelNum(){
      this.queryParams.flag = 0;
      getSetupProjectList(this.queryParams).then(response => {
        this.unDoneNum ='待设置('+response.total+')';
      });

      this.queryParams.flag = 1;
      getSetupProjectList(this.queryParams).then(response => {
          this.doneNum ='已设置('+response.total+')';
      });
    },
    
    /**
     * 驳回
     **/
    handleReject(obj){
       this.visible = true;
       this.rejectData.id = obj.id;
    },

    //驳回取消
    closeReject(){
      this.visible = false;
      this.rejectData = {};
    },

    //提交
    onReject(){

      this.$refs["form"].validate((valid) => {
        if(valid){
          this.$modal.loading("请稍候...");
          rejectSetUp(this.rejectData).then(response=>{
            this.$modal.closeLoading();
            this.getList(); 
            this.handelNum(); 
            this.closeReject();
          })
        }
      })


    },



    //获取选中节点
    handleClickNodes(obj,node){

      //全选中的节点
      let res = this.$refs.tree.getCheckedNodes();

      //半选中的节点
      let bres = this.$refs.tree.getHalfCheckedNodes();

      this.checkedNodeList =  res.concat(bres); 
 
 
    },
    //项目详情
    openViewDetail(row){
      this.$nextTick(() => {
        this.$router.push({
          path: "ProjectDetail",
          query: row
        })
      })

    },
 
    //项目经理列表
    getProjectManagerList(){
      getUserByPostCode('pjm').then(response => {
        this.projectManagerList = response.data;
      });
    },

    closeOpen() {
      this.open = false;
      this.form={};
      this.checkedNodeList=[];
      this.currentId = null;
    },

       //查看OA表单详情
   linkToOA(oaId){
      signLoginToEkp(oaId).then(response=>{
        if(response.code == 200){
          window.open(response.data.authorizationURL, '_blank');
        }else{
          this.$alert(response.data.msg, '错误');
        }  
                   
      })
    },


 
    //提交
    onSure(){

       this.handleClickNodes();

       if(this.checkedNodeList.length == 0){
        this.$alert('请先勾选节点', '提示', {
          confirmButtonText: '确定',
           
        });

        return false;
       }  


       this.$modal.loading("请稍候...");
       let param = {
        projectId:this.currentId,
        checkedNodeList:this.checkedNodeList
       }
       
       saveSetUp(param).then(response => {
          this.getList();
          this.handelNum();
          this.$modal.closeLoading();
          this.closeOpen(); 
      });
    },
 


    handleClick(obj) {
      this.queryParams.flag = obj;
      this.getList()
    },
    /** 查询项目列表 */
    getList() {
      this.queryParams.exportFlag=null
      this.queryParams.flag = this.activeName;
      this.loading = true;
      getSetupProjectList(this.queryParams).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
 
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
 
 
    /** 设置按钮操作 */
    handleSet(row) {
      
      this.title = "设置项目";
      this.currentId = row.id;
      this.$modal.loading("请稍候...");

      getProjectCurrTempleteDetail().then(response => {
        
         this.form = response.data;
         this.taskTrees = response.data.treeSelectList;
         this.open = true;
         //模版设置默认要选中的
         this.checkedList = response.data.checkedList;

         //加载已选择的数据  如果是已经选择过 则覆盖模版中默认选择的选中数据 
         getSetup(row.id).then(response=>{
           this.$modal.closeLoading();
           this.checkedList  = response.data;
         })

      });

  
    },
 
 
    // /** 导出按钮操作 */
    // handleExport() {
    //   this.queryParams.exportFlag="1"
    //   this.download('/business/project/export', {
    //     ...this.queryParams
    //   }, `${new Date().getTime()}_项目数据.xlsx`) 
    // },
  }
};
</script>
<style scoped>
.el-col {
  height: 60px;
}

.labelword ::v-deep .el-form-item__label {
  white-space: pre-line !important;
  line-height: 15px !important;
}

.el-table .danger-row {
  background: rgb(187, 179, 184);
}

.el-table .success-row {
  background: #00FF00;
}

.el-tabs__nav-wrap::after{
  height: 0.5px;
}

::v-deep .table_header_row{
  background-color:#ffffff !important;

}

::v-deep .el-dialog {
  height: 90vh;
  overflow: auto;
}


.tree-dialog{
  max-height: 500px;
  overflow-y: auto;
}
</style>
